<!--
 * @Author: Haochen
 * @Date: 2021-12-25 11:29:34
 * @LastEditTime: 2021-12-26 15:43:34
 * @FilePath: \recipes-admin-system\src\components\menu\Steps.vue
-->
<template>
  <el-popover placement="left" trigger="click" transition="fade-in-linear">
    <div class="steps-container">
      <div class="step" v-for="(item, index) in method" :key="item.describe">
        <div class="description">
          <span>{{ index + 1 }}</span
          >. <span>{{ item.describe }}</span>
        </div>

        <img :src="item.img" alt="" />
      </div>
    </div>
    <el-button slot="reference">查看</el-button>
  </el-popover>
</template>

<script>
export default {
  props: {
    method: {
      type: Array,
    },
  },
  created() {},

  methods: {},
};
</script>

<style scoped lang="scss">
.steps-container {
  overflow-y: auto;
  width: 250px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .step {
    width: 95%;
    text-align: center;
    margin: 10px;
    border-radius: $vue-border-radius-base;
    box-shadow: $vue-box-shadow-common;
    padding: 5px;
    .description {
      text-align: left;
    }
    img {
      width: 200px;
      height: 200px;
      border-radius: $vue-border-radius-base;
    }
  }
}

.steps-container::-webkit-scrollbar ::v-deep {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.steps-container::-webkit-scrollbar-thumb ::v-deep {
  border-radius: 2px;
  height: 50px;
  background: #eee;
}
.steps-container::-webkit-scrollbar-track ::v-deep {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
</style>
